<template>
  <StatisticsGrid 

     :layout-data="layout"
  
  >

  <template #gridL>
    <div class="merak-aside">左侧菜单sdfsadf</div>
  </template>

  <template #headerL>
   SDFSAF
  </template>

  <template #slot0='{item}'>
    <div :class="'grid_header ' + item.class">
                  <div class="grid_header_l">
                    {{ item.name }}
                  </div>
                  <div class="grid_header_r">
                    <el-select
                      v-if="item.i == 2 || item.i == 3"
                      class="eCharts_select"
                      v-model="value3"
                      multiple
                      collapse-tags
                      collapse-tags-tooltip
                      placeholder="Select"
                      style="width: 150px; margin-top: -6px"
                    >
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                    <el-select
                      v-if="item.i == 3"
                      class="eCharts_select"
                      v-model="value3"
                      multiple
                      collapse-tags
                      collapse-tags-tooltip
                      placeholder="Select"
                      style="width: 150px; margin-top: -6px"
                    >
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>

                    <!-- 删除icon -->
                    <!-- <span v-if="layout.length > 1 && item.i!== 2 " class="btn close" @click="delItem(item)"
                    ><el-icon><Delete /></el-icon
                  ></span> -->

                    <!-- <span class="btn"
                    ><el-icon><Refresh /></el-icon
                  ></span> -->

                    <!-- 图标 -->
                    <!-- <span v-if="item.i == 0" class="btn close"
                    ><el-icon><DataLine /></el-icon
                  ></span> -->

                    <!-- 点点点 -->
                    <el-dropdown>
                      <span class="el-dropdown-link btn">
                        <el-icon><MoreFilled /></el-icon>
                      </span>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item>Action 1</el-dropdown-item>
                          <el-dropdown-item>Action 2</el-dropdown-item>
                          <el-dropdown-item>Action 3</el-dropdown-item>
                          <el-dropdown-item disabled>Action 4</el-dropdown-item>
                          <el-dropdown-item divided>Action 5</el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </div>

                <div class="grid_content">
                  <div v-if="item.i == 0" class="eCharts_header">
                    <div class="eCharts_header_l">二级标题/tab标签</div>
                    <div class="eCharts_header_r">
                      <el-select
                        @change="change_echarts_data(item)"
                        class="eCharts_select"
                        v-model="value"
                        placeholder="Select"
                        style="width: 240px"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                          :disabled="item.disabled"
                        />
                      </el-select>

                      <el-select
                        class="eCharts_select"
                        v-model="value3"
                        multiple
                        collapse-tags
                        collapse-tags-tooltip
                        placeholder="Select"
                        style="width: 240px"
                      >
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </div>
                  </div>

                  <div v-if="item.i == 1" class="eCharts_header">
                    <div
                      :class="open ? 'advanced_search open' : 'advanced_search'"
                      @mouseleave="search_mouseover"
                      @mouseenter="search_mouseenter"
                    >
                      <div class="selected_box">
                        <div class="selected-entries">
                          <b class="selected-label">商品类型:</b>
                          <span>鞋 、</span>
                          <span>包</span>
                        </div>
                        <div class="selected-entries">
                          <b class="selected-label">商家1:</b>
                          <span>111 、</span>
                          <span>2222</span>
                        </div>
                      </div>
                      <div class="form_box">
                        <div style="padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1px solid #e6a23c">
                          <div class="selected-entries">
                            <b class="selected-label">商品类型:</b>
                            <span>鞋 、</span>
                            <span>包</span>
                          </div>
                          <div class="selected-entries">
                            <b class="selected-label">商家1:</b>
                            <span>111 、</span>
                            <span>2222</span>
                          </div>
                          <div class="selected-entries">
                            <b class="selected-label">品牌:</b>
                            <span>商家鞋鞋鞋鞋鞋鞋鞋鞋 、</span>
                            <span>商家鞋鞋鞋鞋鞋鞋鞋</span>
                          </div>
                        </div>

                        <el-form label-position="top" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
                          <el-row :gutter="20">
                            <el-col :span="12">
                              <el-form-item label="商品类型">
                                <el-select class="qf_select" v-model="goods_type" placeholder="Select">
                                  <el-option
                                    v-for="item in options_goods_type"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    :disabled="item.disabled"
                                  />
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="12">
                              <el-form-item label="商家">
                                <el-select class="qf_select" v-model="goods_spliuer" placeholder="Select">
                                  <el-option
                                    v-for="item in options_goods_spliuer"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    :disabled="item.disabled"
                                  />
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="12">
                              <el-form-item label="品牌">
                                <el-select class="qf_select" v-model="goods_spliuer" placeholder="Select">
                                  <el-option
                                    v-for="item in options_goods_spliuer"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    :disabled="item.disabled"
                                  />
                                </el-select>
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </el-form>
                      </div>

                      <span class="close"
                        ><el-icon><CircleClose /></el-icon
                      ></span>
                    </div>
                  </div>

                  <div class="grid_eCharts_content" style="width: 100%; height: 100%; flex: 1">
                    <ECharts
                      v-if="item.status"
                      :ref="(el: refItem) => handleSetFromMap(el, item)"
                      :option="item.charts"
                    ></ECharts>
                    <div v-else>等待中</div>
                  </div>

                  <!-- <template v-if="item.i == 0">
                  <canvas ref="echartsRef1" id="sd" style="width: 100%; height: 100%">gamePlay</canvas>
                </template> -->
                </div>
                      




  </template>





  <template #slot1>
    2323wqeqweqwee
                      




  </template>
  
  





</StatisticsGrid>

</template>

<script setup lang="ts" name="caseTwo">
import { onBeforeMount, watch,ref, reactive, onMounted, getCurrentInstance, nextTick  } from "vue";
import StatisticsGrid from "@/components/StatisticsGrid/index.vue";


const layout = ref([
  {
  
    echartsConfig:[
      {
        name_ref:"chart1_erwe09234",
        type:'map',
        url:"",
        options: {
              title: {
                text: "ECharts",
                textStyle: {
                  fontSize: 14
                }
              },
              tooltip: {},
              legend: {
                data: ["销量"]
              },
              xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
              },
              yAxis: {},
              series: [
                {
                  name: "销量",
                  type: "bar",
                  data: [5, 20, 36, 10, 10, 20]
                }
              ]
        }
      },
      {
        name_ref:"chart1_erwe09234",
        type:'map',
        url:"",
        options: {
              title: {
                text: "ECharts",
                textStyle: {
                  fontSize: 14
                }
              },
              tooltip: {},
              legend: {
                data: ["销量"]
              },
              xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
              },
              yAxis: {},
              series: [
                {
                  name: "销量",
                  type: "bar",
                  data: [5, 20, 36, 10, 10, 20]
                }
              ]
        }
      },
    ],
    id:"0",
    x: 0,
    y: 0,
    w: 8,
    h: 10,
    class: "has_blue_line",
    tit: "销售额",
    minW: "",
    minH: "",
    maxW: "",
    maxH: "",
  },
 { x: 9, y: 20, w: 3, h: 6, i: "10", class: "", name: "在售商品型号", minW: "", minH: "", maxW: "", maxH: "" }
]);
// const layout = ref([
//   {





//     charts: {
//       title: {
//         text: "ECharts",
//         textStyle: {
//           fontSize: 14
//         }
//       },
//       tooltip: {},
//       legend: {
//         data: ["销量"]
//       },
//       xAxis: {
//         data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
//       },
//       yAxis: {},
//       series: [
//         {
//           name: "销量",
//           type: "bar",
//           data: [5, 20, 36, 10, 10, 20]
//         }
//       ]
//     },

//     x: 0,
//     y: 0,
//     w: 8,
//     h: 10,
//     i: "0",
//     class: "has_blue_line",
//     name: "销售额",
//     minW: "",
//     minH: "",
//     maxW: "",
//     maxH: "",
//     activeName: "first"
//   },
//   {
//     charts: {
//       title: {
//         text: "Chart",
//         textStyle: {
//           fontSize: 12
//         }
//       },
//       tooltip: {
//         trigger: "axis",
//         axisPointer: {
//           type: "cross",
//           label: {
//             backgroundColor: "#6a7985"
//           }
//         }
//       },
//       legend: {
//         data: ["Email", "Union Ads", "Video Ads"]
//       },
//       toolbox: {
//         feature: {
//           saveAsImage: {}
//         }
//       },
//       grid: {
//         left: "3%",
//         right: "4%",
//         bottom: "3%",
//         containLabel: true
//       },
//       xAxis: [
//         {
//           type: "category",
//           boundaryGap: false,
//           data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
//         }
//       ],
//       yAxis: [
//         {
//           type: "value"
//         }
//       ],
//       series: [
//         {
//           name: "Email",
//           type: "line",
//           stack: "Total",
//           areaStyle: {},
//           emphasis: {
//             focus: "series"
//           },
//           data: [120, 132, 101, 134, 90, 230, 210]
//         },
//         {
//           name: "Union Ads",
//           type: "line",
//           stack: "Total",
//           areaStyle: {},
//           emphasis: {
//             focus: "series"
//           },
//           data: [220, 182, 191, 234, 290, 330, 310]
//         },
//         {
//           name: "Video Ads",
//           type: "line",
//           stack: "Total",
//           areaStyle: {},
//           emphasis: {
//             focus: "series"
//           },
//           data: [150, 232, 201, 154, 190, 330, 410]
//         }
//       ]
//     },
//     x: 8,
//     y: 0,
//     w: 4,
//     h: 10,
//     i: "1",
//     minW: "",
//     minH: "",
//     name: "订单量",
//     class: "",
//     maxW: "",
//     maxH: ""
//   },
//   {
//     x: 0,
//     y: 10,
//     w: 6,
//     h: 8,
//     i: "2",
//     name: "在售品类",
//     class: "",
//     minW: "",
//     minH: "",
//     maxW: "",
//     maxH: ""
//   },
//   { x: 6, y: 10, w: 6, h: 8, i: "3", name: "我有最小宽度和最小高度", class: "", minW: 1, minH: 3, maxW: "", maxH: "" },
//   { x: 0, y: 18, w: 2, h: 5, i: "4", name: "", class: "", name: "在售品类", minW: "", minH: "", maxW: "", maxH: "" },
//   { x: 6, y: 18, w: 3, h: 5, i: "5", class: "", minW: "", name: "在售对象", minH: "", maxW: "", maxH: "" },
//   { x: 9, y: 18, w: 3, h: 5, i: "6", name: "在售商品型号", class: "has_blue_line", minW: "", minH: "", maxW: "", maxH: "" },
//   { x: 0, y: 20, w: 3, h: 6, i: "7", name: "我有最大宽度和最大高度", class: "", minW: "", minH: "", maxW: 10, maxH: 5 },
//   {
//     charts: {
//       xAxis: {
//         type: "category",
//         data: ["Mon", "Tue"]
//       },
//       yAxis: {
//         type: "value"
//       },
//       series: [
//         {
//           data: [45, 60, 80],
//           type: "line"
//         }
//       ]
//     },
//     x: 3,
//     y: 20,
//     w: 3,
//     h: 6,
//     i: "8",
//     class: "",
//     name: "SPU上架",
//     minW: "",
//     minH: "",
//     maxW: "",
//     maxH: ""
//   },
//   { x: 6, y: 20, w: 3, h: 6, i: "9", class: "", name: "在售商品型号", minW: "", minH: "", maxW: "", maxH: "" },
//   { x: 9, y: 20, w: 3, h: 6, i: "10", class: "", name: "在售商品型号", minW: "", minH: "", maxW: "", maxH: "" }
// ]);

</script>

<style  lang="scss">
@import "./index.scss";
@import "@/components/StatisticsGrid/index.scss";
</style>
